<template>
  <div>
    <div class="userinfo">
      <div class="info">
        <img :src="'http://8.138.102.145/images/' + userinfo.avatar" alt="" />
        <div class="llq">
          <p style="color: #f3f4f6; font-size: 1.1rem">{{ userinfo.nickName }}</p>
          <p>余额：{{ userinfo.balance }}</p>
        </div>
      </div>
      <van-row class="user-links">
        <van-col span="6" @click="routerto(0)">
          <van-icon name="pending-payment" />
          待付款
        </van-col>
        <van-col span="6" @click="routerto(1)">
          <van-icon name="records" />
          待出餐
        </van-col>
        <van-col span="6" @click="routerto(2)">
          <van-icon name="tosend" />
          已出餐
        </van-col>
        <van-col span="6" @click="routerto(3)">
          <van-icon name="logistics" />
          已完成
        </van-col>
      </van-row>
    </div>

    <van-cell-group class="user-group">
      <van-cell icon="records" title="全部订单" to="/order" />
    </van-cell-group>

    <van-cell-group>
      <van-cell icon="manager-o" title="个人信息" to="/userinfo" />
      <van-cell icon="gold-coin-o" title="支付密码" @click="$router.push('/setpaypassword')" />
      <van-cell icon="add-o" title="余额充值" @click="toExchange()" />
      <van-cell icon="setting-o" title="退出登录" @click="logout" />
    </van-cell-group>
  </div>
</template>

<script>
// import { Row, Col, Icon, Cell, CellGroup } from "vant";

export default {
  // components: {
  //   [Row.name]: Row,
  //   [Col.name]: Col,
  //   [Icon.name]: Icon,
  //   [Cell.name]: Cell,
  //   [CellGroup.name]: CellGroup,
  // },
  mounted() {
    this.req.get('/auth/userinfo').then((res) => {
      this.userinfo = res.data;
    });
  },
  data() {
    return {
      userinfo: {},
    };
  },
  methods: {
    logout() {
      this.req.post('/auth/logout').then((res) => {
        window.sessionStorage.removeItem('token');
        this.$router.push('/login');
      });
    },
    routerto(stauts) {
      this.$router.push({ path: '/order', query: { status: stauts } });
    },
    //余额充值
    toExchange() {
      this.$router.push({
        path: '/paymethod',
        query: {
          type: 'exchange',
        },
      });
    },
  },
};
</script>

<style lang="less">
.user {
  &-poster {
    width: 100%;
    height: 53vw;
    display: block;
  }

  &-group {
    margin-bottom: 15px;
  }

  &-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;

    .van-icon {
      display: block;
      font-size: 24px;
    }
  }
}
.userinfo {
  position: relative;
  color: #fff;
  height: 12.5rem;
  background: linear-gradient(#ff010f, #ff3661);
  img {
    height: 80px;
    width: 80px;
    border-radius: 0.5rem;
  }
  .info {
    display: flex;
    align-items: center;
    padding: 1.25rem;
    .llq {
      margin-left: 1.25rem;
    }
  }
}
.user-links {
  background-color: transparent;
  color: #fff;
}
</style>
